<template>
  <div class="app-container">
    <div class="flex mb-3">
      <el-card shadow="never" class="mr-3 w-1/3">
        <h3>在线人员</h3>
        <div class="flex flex-wrap">
          <div class="flex p-3 rounded-md" v-for="(item, index) in 3" :key="index">
            <img src="/gong.png" style="width: 40px" alt="" />
            <div class="">
              张三<br />
              13800138000
            </div>
          </div>
          <div class="flex p-3 rounded-md" v-for="(item, index) in 2" :key="index">
            <img src="/touxiang1.svg" class="w-10" alt="" />
            <div class="">
              张三<br />
              13800138000
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="mr-3 w-1/3">
        <h3>
          2024年5月安全榜
          <el-button type="primary" text>编辑</el-button>
        </h3>
        <img src="/pai.png" class="w-full" alt="" />
        <!-- <el-table :data="tableData2">
          <el-table-column type="index" label="序" width="50" />
          <el-table-column prop="name0" label="姓名" />
          <el-table-column label="安全分">
            <template #default="scope">
              {{ scope.row.name1 }}
              <el-icon color="red"><CaretTop /></el-icon>
            </template>
          </el-table-column>
        </el-table> -->
      </el-card>
      <el-card shadow="never" class="w-1/3">
        <h3>学习园地 </h3>
        <el-button
          icon="Switch"
          type="primary"
          bg
          text
          style="padding: 30px; font-size: 20px"
          @click="$router.push('/labels/study')"
          >必修课</el-button
        >
        <el-button
          icon="TrophyBase"
          type="primary"
          bg
          text
          style="padding: 30px; font-size: 20px"
          @click="dialogVisible2 = true"
          >每日答题</el-button
        >
        <div class="mt-3">
          <el-button icon="Iphone" type="primary" bg text style="padding: 30px; font-size: 20px">在线学习</el-button>
          <el-button type="primary" icon="Plus" text bg style="padding: 30px; font-size: 20px"></el-button>
        </div>
      </el-card>
    </div>
    <el-dialog v-model="dialogVisible2" title="每日答题" width="300">
      <div class="">
        <el-button type="primary" text>重新上传</el-button>
      </div>
      <img src="/wen.jpg" class="w-full" alt="" />
    </el-dialog>
    <div class="flex">
      <el-card shadow="never" class="w-1/2 mr-3">
        <div class="toolbar-wrapper mb-3">
          <el-button type="primary" @click="dialogVisible = true">新建公告</el-button>
          <el-button type="primary" @click="dialogVisible = true">小组学习</el-button>
          <el-button type="primary">导入</el-button>
          <el-button type="primary">导出</el-button>
          <el-button type="primary" text @click="flag = !flag">筛选</el-button>
        </div>
        <el-form v-show="flag" :inline="true" class="mt-2.5" label-width="auto">
          <el-form-item prop="username" v-for="(item, index) in s1" :key="index" :label="item">
            <el-input placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column type="index" label="序" width="50" />
          <el-table-column v-for="(item, index) in s1" :key="index" :prop="'name' + index" :label="item" />
          <el-table-column label="备注" />

          <el-table-column fixed="right" label="操作" align="center">
            <el-button type="primary" text bg size="small" @click="$router.push('/labels/secDetail')">详情</el-button>
            <div><el-button type="primary" text bg size="small">修改</el-button></div>
            <div><el-button type="danger" text bg size="small">删除</el-button></div>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" class="w-1/2">
        <div class="toolbar-wrapper mb-3">
          <el-button type="primary" @click="dialogVisible = true">新建违章公告</el-button>
          <el-button type="primary" @click="$router.push('/labels/year')">违章统计</el-button>
          <el-button type="primary">导入</el-button>
          <el-button type="primary">导出</el-button>
          <el-button type="primary" text @click="flag = !flag">筛选</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = true">小组学习</el-button> -->
        </div>
        <el-table :data="tableData3">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column type="index" label="序" width="50" />
          <el-table-column v-for="(item, index) in s2" :key="index" :prop="'name' + index" :label="item" />
          <el-table-column label="备注" />

          <el-table-column fixed="right" label="操作" align="center">
            <el-button type="primary" text bg size="small">详情</el-button>
            <div><el-button type="primary" text bg size="small">修改</el-button></div>
            <div><el-button type="danger" text bg size="small">删除</el-button></div>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog v-model="dialogVisible" title="新建" width="30%">
      <el-form ref="formRef" :rules="formRules" label-width="auto">
        <el-form-item prop="username" v-for="(item, index) in s3" :key="index" :label="item">
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item label="上传照片/文件">
          +
        </el-form-item>
        <el-form-item label="考题文件">
          +
        </el-form-item>
        <el-form-item label="小组选人">

        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">新建</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"

// const s1 = ["发运清单", "内向交货单号", "发运时间", "发运地点", "供方名称", "送达日期", "采购人", "备注"]
const s1 = ["公告名称", "公告内容", "发布人", "发布时间"]
const s2 = ["违章名称", "违章性质", "违章内容", "违章人", "发布人", "发布时间"]
const s3 = [
  "违章名称",
  "违章性质",
  "违章内容",
  "违章人",
  "有效期"
  // '发布时间',
]
const tableData2 = []
let num = 12
for (let index = 0; index < 3; index++) {
  tableData2.push({
    name0: "张三 " + (index + 1),
    name1: num--
  })
}
const formRules = {
  username: [{ required: true, trigger: "blur", message: "请输入" }]
}
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const flag = ref(false)
const tableData = []
const tableData3 = []
for (let i = 0; i < 10; i++) {
  tableData.push({
    name0: "天气炎热",
    name1: "有准备冷饮、风机",
    name2: "张三",
    name3: "2024-04-04 07:28:35"
  })
}
for (let i = 0; i < 10; i++) {
  tableData3.push({
    name0: "违章地点",
    name1: "紧急",
    name2: "超速、闯红灯，鸣笛",
    name3: "张三",
    name4: "李四",
    name5: "2024-04-04 07:28:35"
  })
}
</script>
<style lang="scss" scoped></style>
